<%--
  Created by IntelliJ IDEA.
  User: Kirito
  Date: 2022/3/5
  Time: 15:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>站点管理：站点列表</title>
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="/js/jquery.min.js" type="text/javascript"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
    <h1>站点管理</h1>
    <form class="form-inline">
        <label>网站名称</label>
        <input class="form-control" name="siteName" type="text">
        <label>所属国家</label>
        <select class="form-control" name="country">
          <option value="ALL">全部</option>
        </select>
        <button id="btn-search" type="button" class="btn btn-default">查询</button>
        <a href="/website/add" class="btn btn-link">去添加站点</a>
    </form>
    <table class="table table-striped table-hover">
        <thead>
        <tr>
            <th>序号</th>
            <th>站点名称</th>
            <th>地址</th>
            <th>访问排名</th>
            <th>所属国家</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div class="nav">
        <ul class="pagination">
            <%--<li><a>上一页</a></li>--%>
        <%--</ul>--%>
        <%--<ul class="pagination">--%>
            <%--<li><a>1</a></li>--%>
        <%--</ul>--%>
        <%--<ul class="pagination">--%>
            <%--<li><a>2</a></li>--%>
        <%--</ul>--%>
        <%--<ul class="pagination">--%>
            <%--<li><a>3</a></li>--%>
        <%--</ul>--%>
        <%--<ul class="pagination">--%>
            <%--<li><a>4</a></li>--%>
        <%--</ul>--%>
        <%--<ul class="pagination">--%>
            <%--<li><a>下一页</a></li>--%>
        </ul>
    </div>
</div>
<script type="text/javascript">
    var name,country,pageNum,pageSize;//分别缓存查询的站点名，国家 页码，每页显示条数
    $(function () {
        loadData();//网页打开时先查一下数据
        //为擦汗寻按钮绑定click函数
        $("#btn-search").click(function() {
             name=$("input[name=siteName]").val();//取出输入框的内容
             country=$("select[name=country]").val();//获取下拉框中的国家
            $("tbody").empty();
            loadData(name,country);
        });
        //获取国家列表添加到下拉框当中
        $.get(
            "/website/countryList",
            function (data) {
               for (var i in data){
                   var option = $("<option></option>")
                   option.text(data[i]);
                   option.val(data[i]);
                   $("select[name=country]").append(option);
               }
            }
        );
        $("select[name=country]").change(function () {
            $("#btn-search").click();
        });
    })
    function  loadData(siteName,country) {
        $.get(
            "/website/list",
            {"name":siteName,"country":country,"pn":pageNum,"ps":pageSize},//查询条件，暂时空着
            function (data) {
                var list=data.list;//获取数据集
                for (var i in list){
                    var tr=$("<tr></tr>");
                    tr.append("<td>"+list[i].id+"</td>");
                    tr.append("<td>"+list[i].name+"</td>");
                    tr.append("<td>"+list[i].url+"</td>");
                    tr.append("<td>"+list[i].alexa+"</td>");
                    tr.append("<td>"+list[i].country+"</td>");
                    var tdOpt=$("<td></td>")
                    tdOpt.append("<a class='btn btn-link btn-acc'>访问</a>");
                    tdOpt.append("<button class='btn btn-danger btn-del'>删除</button>");
                    tr.append(tdOpt);
                    $("tbody").append(tr);
                }
                //点击访问按钮
                $("tbody .btn-acc").click(function () {
                    var tr=$(this).parents('tr');//访问站点
                    var id=tr.children("td").eq(0).text();//获取站点
                    var url=tr.children("td").eq(2).text();
                    $.post(
                        "/website/access",
                        {"siteId":id}
                    )
                    window.open(url);
                });

                //为删除按钮添加点击事件
                $("tbody .btn-del").click(function () {
                    var tr=$(this).parents("tr");//待删除的行
                    var id=tr.children("td").eq(0).text();//获取站点id
                    var name=tr.children("td").eq(1).text();//获取站点昵称
                    if(confirm("确定要删除站点"+name+"?")){
                     $.post(
                         "/website/delete",
                         {"id":id},
                         function (data) {
                             if (data == "success"){
                                 alert("删除成功");
                                 $("#btn-search").click();//刷新表格
                             }else{
                                 alert("删除失败")
                             }
                         }
                     )
                    }
                })
                
                startPage(data);//开始分页
            }
        );

    }
    function startPage(pageInfo) {
        $(".pagination").empty();//每次分页清空列表
        if(pageInfo.hasPreviousPage){
            var li=$("<li><a href='#'>上一页</a></li>")
            $(".pagination").append(li)
            li.attr("data-pn",pageInfo.prePage);
        }
        for (var i in pageInfo.navigatepageNums){
            var li=$("<li><a href='#'>"+pageInfo.navigatepageNums[i]+"</a></li>");
            if(pageInfo.navigatepageNums[i]== pageInfo.pageNum){

                li.attr("data-pn",pageInfo.navigatepageNums[i]);
                li.addClass("active");
            }
            $(".pagination").append(li);

        }
        if(pageInfo.hasNextPage){
            var li=$("<li><a href='#'>下一页</a></li>")
            li.attr("data-pn",pageInfo.nextPage);
            $(".pagination").append(li)

        }
        $(".pagination>li").click(function () {
            pageNum=$(this).attr("data-pn");
            $("#btn-search").click();
        })
    }
</script>
</body>
</html>
